<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: xdh-area-selector/xdh-area-select.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: xdh-area-selector/xdh-area-select.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div class="xdh-area-select__content">
    &lt;!--省-->
    &lt;el-select v-bind="$attrs"
               v-model="provinceValue"
               v-if="showLevel(0)"
               @change="handleSelectChange($event,'province')"
               placeholder="请选择省"
               :style="{width:selectWidth}">
      &lt;el-option v-for="item in data"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      &lt;/el-option>
    &lt;/el-select>

    &lt;!--市-->
    &lt;el-select v-bind="$attrs"
               v-model="cityValue"
               v-if="showLevel(1)"
               @change="handleSelectChange($event,'city')"
               placeholder="请选择市"
               :style="{width:selectWidth}">
      &lt;el-option v-for="item in cityData"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      &lt;/el-option>
    &lt;/el-select>

    &lt;!--县区-->
    &lt;el-select v-bind="$attrs"
               v-model="areaValue"
               v-if="showLevel(2)"
               @change="handleSelectChange($event,'area')"
               placeholder="请选择县区"
               :style="{width:selectWidth}">
      &lt;el-option v-for="item in areaData"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      &lt;/el-option>
    &lt;/el-select>

    &lt;!--乡镇街道-->
    &lt;el-select v-bind="$attrs"
               v-model="townValue"
               v-if="showLevel(3)"
               @change="getSelectedValue"
               placeholder="请选择乡镇街道"
               :style="{width:selectWidth}">
      &lt;el-option v-for="item in townData"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      &lt;/el-option>
    &lt;/el-select>
  &lt;/div>
&lt;/template>

&lt;script>
  export default {
    name: 'XdhAreaSelect',
    props: {
      isDefault: {
        type: Boolean
      },
      data: {
        type: Array
      },
      value: {
        type: Array
      },
      selectWidth: {
        type: String
      },
      level: {
        type: Number,
        default: 4
      }
    },
    watch: {
      value: {
        handler(value) {
          if (value) {
            this.renderValue()
          }
        },
        immediate: true
      }
    },
    data() {
      return {
        cityData: [],
        areaData: [],
        townData: [],

        provinceValue: '',
        cityValue: '',
        areaValue: '',
        townValue: ''
      }
    },
    computed: {
      selectedValue() {
        const value = []
        this.provinceValue &amp;&amp; value.push(this.provinceValue)
        this.cityValue &amp;&amp; value.push(this.cityValue)
        this.areaValue &amp;&amp; value.push(this.areaValue)
        this.townValue &amp;&amp; value.push(this.townValue)
        return value
      }
    },
    methods: {
      /**
       * 显示层级
       */
      showLevel(level) {
        return level &lt;= this.level
      },
      /**
       * 回填数据
       */
      renderValue() {
        if (this.value[0] &amp;&amp; this.level >= 0) {
          this.provinceValue = this.value[0]
          this.getOptionsData('province', this.value[0])
        }
        if (this.value[1] &amp;&amp; this.level >= 1) {
          this.cityValue = this.value[1]
          this.getOptionsData('city', this.value[1])
        }
        if (this.value[2] &amp;&amp; this.level >= 2) {
          this.areaValue = this.value[2]
          this.getOptionsData('area', this.value[2])
        }
        if (this.value[3] &amp;&amp; this.level >= 3) {
          this.townValue = this.value[3]
        }
      },
      /**
       * 重新选择时重置所有选项
       * @param type
       */
      resetData(type) {
        switch (type) {
          case 'province':
            this.areaData = []
            this.townData = []
            this.cityValue = ''
            this.areaValue = ''
            this.townValue = ''
            break;
          case 'city':
            this.townData = []
            this.areaValue = ''
            this.townValue = ''
            break;
          case 'area':
            this.townValue = ''
            break;
        }
      },
      /**
       * 获取下拉框数据
       */
      getOptionsData(type, val) {
        let data
        switch (type) {
          case 'province':
            data = this.data.filter(n => n.value === val)
            this.cityData = data[0].children
            break;
          case 'city':
            data = this.cityData.filter(n => n.value === val)
            this.areaData = data[0].children
            break;
          case 'area':
            data = this.areaData.filter(n => n.value === val)
            this.townData = data[0].children
            break;
        }
      },
      /**
       * 省/市/县区下拉选中事件
       */
      handleSelectChange(val, type) {
        this.resetData(type)
        this.getOptionsData(type, val)
        this.getSelectedValue()
      },
      /**
       * 选择乡镇街道
       */
      handleTownChange() {
        this.getSelectedValue()
      },
      /**
       * 获取最后选择的值
       */
      getSelectedValue() {
        this.$emit('on-select', this.selectedValue)
      }
    },
    created() {
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-widgets_xdh-affix.html">widgets/xdh-affix</a></li><li><a href="module-widgets_xdh-anchor.html">widgets/xdh-anchor</a></li><li><a href="module-widgets_xdh-avatar.html">widgets/xdh-avatar</a></li><li><a href="module-widgets_xdh-back-top.html">widgets/xdh-back-top</a></li><li><a href="module-widgets_xdh-calendar.html">widgets/xdh-calendar</a></li><li><a href="module-widgets_xdh-capture.html">widgets/xdh-capture</a></li><li><a href="module-widgets_xdh-contextmenu.html">widgets/xdh-contextmenu</a></li><li><a href="module-widgets_xdh-countdown.html">widgets/xdh-countdown</a></li><li><a href="module-widgets_xdh-curd.html">widgets/xdh-curd</a></li><li><a href="module-widgets_xdh-description-list.html">widgets/xdh-description-list</a></li><li><a href="module-widgets_xdh-dialog.html">widgets/xdh-dialog</a></li><li><a href="module-widgets_xdh-dialog-form.html">widgets/xdh-dialog-form</a></li><li><a href="module-widgets_xdh-echarts.html">widgets/xdh-echarts</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-bar-rankings.html">widgets/xdh-echarts/chart/xdh-bar-rankings</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-flow.html">widgets/xdh-echarts/chart/xdh-flow</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-pie-gauge.html">widgets/xdh-echarts/chart/xdh-pie-gauge</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-pie-semiring.html">widgets/xdh-echarts/chart/xdh-pie-semiring</a></li><li><a href="module-widgets_xdh-echarts_chart_xdh-waterwave.html">widgets/xdh-echarts/chart/xdh-waterwave</a></li><li><a href="module-widgets_xdh-editor.html">widgets/xdh-editor</a></li><li><a href="module-widgets_xdh-ellipsis.html">widgets/xdh-ellipsis</a></li><li><a href="module-widgets_xdh-filter-panel.html">widgets/xdh-filter-panel</a></li><li><a href="module-widgets_xdh-form.html">widgets/xdh-form</a></li><li><a href="module-widgets_xdh-go.html">widgets/xdh-go</a></li><li><a href="module-widgets_xdh-grid.html">widgets/xdh-grid</a></li><li><a href="module-widgets_xdh-header.html">widgets/xdh-header</a></li><li><a href="module-widgets_xdh-image-picker.html">widgets/xdh-image-picker</a></li><li><a href="module-widgets_xdh-image-text.html">widgets/xdh-image-text</a></li><li><a href="module-widgets_xdh-layout.html">widgets/xdh-layout</a></li><li><a href="module-widgets_xdh-list-panel.html">widgets/xdh-list-panel</a></li><li><a href="module-widgets_xdh-loading.html">widgets/xdh-loading</a></li><li><a href="module-widgets_xdh-marquee.html">widgets/xdh-marquee</a></li><li><a href="module-widgets_xdh-menu.html">widgets/xdh-menu</a></li><li><a href="module-widgets_xdh-menu-toggle.html">widgets/xdh-menu-toggle</a></li><li><a href="module-widgets_xdh-pager.html">widgets/xdh-pager</a></li><li><a href="module-widgets_xdh-panel.html">widgets/xdh-panel</a></li><li><a href="module-widgets_xdh-print.html">widgets/xdh-print</a></li><li><a href="module-widgets_xdh-scroll.html">widgets/xdh-scroll</a></li><li><a href="module-widgets_xdh-select.html">widgets/xdh-select</a></li><li><a href="module-widgets_xdh-slide-panel.html">widgets/xdh-slide-panel</a></li><li><a href="module-widgets_xdh-table.html">widgets/xdh-table</a></li><li><a href="module-widgets_xdh-tabs.html">widgets/xdh-tabs</a></li><li><a href="module-widgets_xdh-tabs_sortable.html">widgets/xdh-tabs/sortable</a></li><li><a href="module-widgets_xdh-tag-canvas.html">widgets/xdh-tag-canvas</a></li><li><a href="module-widgets_xdh-tag-select.html">widgets/xdh-tag-select</a></li><li><a href="module-widgets_xdh-timeline.html">widgets/xdh-timeline</a></li><li><a href="module-widgets_xdh-title.html">widgets/xdh-title</a></li><li><a href="module-widgets_xdh-tree.html">widgets/xdh-tree</a></li><li><a href="module-widgets_xdh-tree-select.html">widgets/xdh-tree-select</a></li><li><a href="module-widgets_xdh-tree-table.html">widgets/xdh-tree-table</a></li><li><a href="module-widgets_xdh-watermark.html">widgets/xdh-watermark</a></li><li><a href="module-widgets_xdh-window.html">widgets/xdh-window</a></li></ul><h3>Classes</h3><ul><li><a href="for%2520recursively%2520splitting%2520tag%2520contents%2520on%2520_br_%2520tags.html">for recursively splitting tag contents on <br> tags</a></li><li><a href="module-widgets_xdh-tabs_sortable-Sortable.html">Sortable</a></li><li><a href="Outline.html">Outline</a></li><li><a href="Tag.html">Tag</a></li><li><a href="TagCanvas.html">TagCanvas</a></li></ul><h3>Events</h3><ul><li><a href="module-widgets_xdh-menu-toggle.html#~event:change">change</a></li><li><a href="module-widgets_xdh-image-picker.html#~event:click">click</a></li><li><a href="module-widgets_xdh-menu-toggle.html#~event:close">close</a></li><li><a href="module-widgets_xdh-pager.html#~event:current-change">current-change</a></li><li><a href="module-widgets_xdh-tabs.html#~event:edit">edit</a></li><li><a href="module-widgets_xdh-tree-select.html#~event:input">input</a></li><li><a href="module-widgets_xdh-capture.html#~event:on-capture">on-capture</a></li><li><a href="module-widgets_xdh-grid.html#~event:on-change">on-change</a></li><li><a href="module-widgets_xdh-image-picker.html#~event:on-clear">on-clear</a></li><li><a href="module-widgets_xdh-tag-canvas.html#event:on-click">on-click</a></li><li><a href="module-widgets_xdh-window.html#~event:on-closed">on-closed</a></li><li><a href="module-widgets_xdh-window.html#~event:on-collapsed">on-collapsed</a></li><li><a href="module-widgets_xdh-table.html#~event:on-column-sort">on-column-sort</a></li><li><a href="module-widgets_xdh-curd.html#~event:on-dialog-close">on-dialog-close</a></li><li><a href="module-widgets_xdh-curd.html#~event:on-dialog-open">on-dialog-open</a></li><li><a href="module-widgets_xdh-window.html#~event:on-drag">on-drag</a></li><li><a href="module-widgets_xdh-countdown.html#~event:on-end">on-end</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-hide">on-hide</a></li><li><a href="module-widgets_xdh-window.html#~event:on-minimized">on-minimized</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-mouseenter">on-mouseenter</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-mouseleave">on-mouseleave</a></li><li><a href="module-widgets_xdh-header.html#~event:on-nav-select">on-nav-select</a></li><li><a href="module-widgets_xdh-capture.html#~event:on-output">on-output</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:on-query'">on-query'</a></li><li><a href="module-widgets_xdh-table.html#~event:on-reach-bottom">on-reach-bottom</a></li><li><a href="module-widgets_xdh-table.html#~event:on-reach-top">on-reach-top</a></li><li><a href="module-widgets_xdh-go.html#~event:on-ready">on-ready</a></li><li><a href="global.html#event:on-remove">on-remove</a></li><li><a href="module-widgets_xdh-form.html#~event:on-reset">on-reset</a></li><li><a href="module-widgets_xdh-window.html#~event:on-resize">on-resize</a></li><li><a href="module-widgets_xdh-table.html#~event:on-row-sort">on-row-sort</a></li><li><a href="module-widgets_xdh-list-panel.html#~event:on-scroll">on-scroll</a></li><li><a href="module-widgets_xdh-header.html#~event:on-search">on-search</a></li><li><a href="module-widgets_xdh-tree-select.html#~event:on-selected">on-selected</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-show">on-show</a></li><li><a href="module-widgets_xdh-slide-panel.html#~event:on-slide">on-slide</a></li><li><a href="module-widgets_xdh-window.html#~event:on-start-drag">on-start-drag</a></li><li><a href="module-widgets_xdh-window.html#~event:on-start-resize">on-start-resize</a></li><li><a href="module-widgets_xdh-window.html#~event:on-stop-drag">on-stop-drag</a></li><li><a href="module-widgets_xdh-window.html#~event:on-stop-resize">on-stop-resize</a></li><li><a href="module-widgets_xdh-form.html#~event:on-submit">on-submit</a></li><li><a href="module-widgets_xdh-curd.html#~event:on-success">on-success</a></li><li><a href="module-widgets_xdh-header.html#~event:on-tool-click">on-tool-click</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-trigger">on-trigger</a></li><li><a href="module-widgets_xdh-editor.html#~event:on-upload">on-upload</a></li><li><a href="module-widgets_xdh-menu-toggle.html#~event:open">open</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:reset-expand-fields">reset-expand-fields</a></li><li><a href="module-widgets_xdh-menu.html#~event:select">select</a></li><li><a href="module-widgets_xdh-pager.html#~event:size-change">size-change</a></li><li><a href="module-widgets_xdh-tabs.html#~event:tab-add">tab-add</a></li><li><a href="module-widgets_xdh-tabs.html#~event:tab-click">tab-click</a></li><li><a href="module-widgets_xdh-tabs.html#~event:tab-remove">tab-remove</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:toggle">toggle</a></li><li><a href="module-widgets_xdh-affix.html#event:change">change</a></li><li><a href="module-widgets_xdh-back-top.html#event:click">click</a></li><li><a href="module-widgets_xdh-curd.html#~event:update:query">update:query</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:update:model">update:model</a></li><li><a href="on-change%2520%2520%25E6%2593%258D%25E4%25BD%259C%25E5%258D%2595%25E4%25B8%25AA%25E6%25A0%2587%25E7%25AD%25BE%25E5%2590%258E%25E8%25A7%25A6%25E5%258F%2591%25E4%25BA%258B%25E4%25BB%25B6%2520%25E5%259B%259E%25E8%25B0%2583%25E5%258F%2582%25E6%2595%25B0%25E5%25B7%25A5%25E4%25B8%25A4%25E4%25B8%25AA.html#~event:%25E4%25BE%259D%25E6%25AC%25A1%25E4%25B8%25BA%25EF%25BC%259A%25E7%25AC%25AC%25E4%25B8%2580%25E5%25BD%2593%25E5%2589%258D%25E6%2593%258D%25E4%25BD%259C%25E7%259A%2584%25E6%25A0%2587%25E7%25AD%25BE%25E6%2595%25B0%25E6%258D%25AE%25E5%25AF%25B9%25E8%25B1%25A1%25EF%25BC%258C%25E7%25AC%25AC%25E4%25BA%258C%25E4%25B8%25BA%25E9%2580%2589%25E4%25B8%25AD%25E7%259A%2584%25E6%25A0%2587%25E7%25AD%25BE%25E5%25AF%25B9%25E8%25B1%25A1%25E6%2595%25B0%25E7%25BB%2584%25E9%259B%2586">依次为：第一当前操作的标签数据对象，第二为选中的标签对象数组集</a></li><li><a href="on-checked-all%2520%25E5%2585%25A8%25E9%2580%2589%25E6%258C%2589%25E9%2592%25AE%25E8%25A7%25A6%25E5%258F%2591%25E4%25BA%258B%25E4%25BB%25B6.html#~event:%25E4%25B8%2580%25E4%25B8%25AA%25E5%258F%2582%25E6%2595%25B0%25E8%25A1%25A8%25E7%25A4%25BA%25E5%25BD%2593%25E5%2589%258D%25E7%258A%25B6%25E6%2580%2581:on-%25E5%2585%25A8%25E9%2580%2589%25E4%25B8%25AD%25EF%25BC%258Coff-%25E5%2585%25A8%25E5%258F%2596%25E6%25B6%2588"> 一个参数表示当前状态:on-全选中，off-全取消</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AddShadowToImage">AddShadowToImage</a></li><li><a href="global.html#counter">counter</a></li><li><a href="global.html#RoundImage">RoundImage</a></li><li><a href="global.html#scopeSlots">scopeSlots</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Oct 09 2018 16:28:55 GMT+0800 (CST)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
